/**
 * Created by 小敏哥 on 2017/8/15.
 * 渲染优惠券使用情况
 */
import React, {Component} from 'react';
import style from './index.scss';
import ItemWithRightArrow from '../../common/itemWithRightArrow';


class CouponDiscount extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        couponDiscount: React.PropTypes.number,//当前优惠券折扣
        couponCount: React.PropTypes.number,//优惠券数量
        goToCoupon: React.PropTypes.func,//跳转到优惠券列表
    };


    //优惠券使用框选择
    chooseCouponDiscount(type) {
        let conmmonDiv = <div className={style.discountLeft}>
            <span className={style.title}>优惠券</span>
            <span className={style.tips}>不能与车务卡同时使用</span>
        </div>;
        switch (type) {
            case 'normal':
                return <div className={style.couponSelect} onClick={url => this.props.goToCoupon()}>
                    <ItemWithRightArrow>
                        <div className={style.discountContent}>
                            {conmmonDiv}
                            <div className={style.discountRight}>
                                <div
                                    className={style.colorBorderDiv }>{this.props.couponCount > 0 ? this.props.couponCount + '张可用' : '无可用优惠券'}</div>
                            </div>
                        </div>
                    </ItemWithRightArrow>
                </div>;
            case 'unable':
                return <div className={style.couponSelect} onClick={url => this.props.goToCoupon()}>
                    <div className={style.discountContent}>
                        {conmmonDiv}
                        <div className={style.discountRight}>
                            <div
                                className={style.unableBorderDiv}>{this.props.couponCount > 0 ? this.props.couponCount + '张可用' : '无可用优惠券'}</div>
                        </div>
                    </div>
                </div>;
            case 'unUsed':
                return <div className={style.couponSelect}>
                    <div className={style.discountContent}>
                        <div className={style.discountLeft}>
                            <span className={style.title}>优惠券</span>
                            <span className={style.tips}>不能与车务卡同时使用</span>
                        </div>
                    </div>
                </div>;
            case 'used':
                return <div className={style.couponSelect} onClick={url => this.props.goToCoupon()}>
                    <ItemWithRightArrow>
                        <div className={style.discountContent}>
                            {conmmonDiv}
                            <div className={style.discountRight}>
                                <div>{this.props.couponDiscount + '元年检优惠券'}</div>
                            </div>
                        </div>
                    </ItemWithRightArrow>
                </div>
        }
    }


    //渲染优惠券使用框
    renderCouponDiscount() {
        //是否使用了优惠券
        var hasDiscount = this.props.couponDiscount > 0;

        if (hasDiscount) {
            return this.chooseCouponDiscount('used');
        }
        else if (this.props.couponCount > 0) {
            return this.chooseCouponDiscount('normal');
        }
        else if (this.props.couponCount <= 0) {
            return this.chooseCouponDiscount('unable');
        }
    }


    render() {
        return <div>
            {
                this.renderCouponDiscount()
            }
        </div>
    }

}

export default CouponDiscount